<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>梯形页签</title>
		<style>
			/*html w/h必须先设100%,才有具体尺寸；否则后面的100%无效。*/
			html{
				width:100%;
				height:100%;
			}
			/*
				background-color: white;
				margin: 0 0 0 0;
				padding: 0 0 0 0;
				overflow: hide;
				display: flex;
			*/
			body{
				position: relative;	
				background-color: #b0d0f0;
				width:100%;
				height:100%;
				overflow: hide;
				margin: 0px;
				padding: 0px;
			}
			.div_bg{
				position: relative;				
				background-color: #404040;
				width: 100%;
				height: 100%;
				--border: solid 4px green;
				overflow: hide;
			}
			.div1{
				position: relative;				
				background-color: #F0F0F0;
				--border: solid 2px #104080;
				width:100%;
				height:10%;
				float:left;
			}
			.div12{
			  width:20%;
			  height:96%;
			  border: solid 1px red;
			}
			nav{
			  position: relative;
			  background-color: rgba(200,100,100,0.5);
			  width:96%;
			  height:85%;
			  --display: inline-block;
				--float:left;
			  font-size: 24px;
			  color: white;
				margin-left: 2%;
				--margin-right: 2%;
				margin-top: 2%;
				padding: 1% 1% 1% 1%;
				text-align:center;
				z-index: 1;  /* z-index 要设为 1,没有不行*/
			}
			/* ::before 是指在主元素的内容前插入 html内容*/
			nav::before{
			  content: '';
			  position: absolute;
			  width:80%;
			  height:80%;
			  left:10%;
			  top:10%;
			  background-color: rgba(120,100,100,0.9);
			  --border: solid 3px yellow;
			  transform: perspective(.5em) rotateX(-5deg);
			  z-index: -1; /* z-index 要设为 -1,文本在0层*/
			}	
			/*
			  transform: perspective(.5em) rotateX(5deg);
			  perspective 属性定义 3D 元素距视图的距离，以像素计。
			  当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
			  注释：perspective 属性只影响 3D 转换元素。
			*/
		   
			#mask1{
				position: relative;				
				background-color: #00003f;
				--border: solid 2px #104080;
				width:100%;
				height:88%;
				float:left;
			}
			#winnerboard1{
				position: relative;				
				background-color: rgba(127,63,63,0.5);
				--border: solid 2px #104080;
				border-radius: 10px;
				width:50%;
				height:70%;
				left: 25%;
				top: 15%;
				--opacity:0.5;
			}
			#winnerboard1_top{
				position: relative;				
				background-color: #6f3f1f;
				--border: solid 1px yellow;
				width:100%;
				height:10%;
			}
			
			#winnerboard1_top1j{
				position: relative;				
				--border: solid 1px blue;
				width:28%;
				height:98%;
				display: table;
				--padding: 8px 4px 18px 10px; /* top,,,left*/
				padding-left: 4px;
				padding-top: 4px;
				float:left;
			}
			.winnerboard_title1{
				--position: absolute;				
				--border: solid 1px red;
				color: white;
				dispaly: table-cell;
				font-size: 18px;
				font-family: "microsoft yahei";
				text-align:center;
			}

			#winnerboard1_top1m{
				position: relative;				
				--border: solid 1px blue;
				width:40%;
				height:98%;
				float:left;
				--text-align:center;
				z-index: 1;  /* z-index 要设为 1,没有不行*/
			}
			#winnerboard1_top1m::before{
			  content: '';
			  position: absolute;
			  width:80%;
			  height:90%;
			  left:10%;
			  top:10%;
			  --background-color: rgba(40,20,10,0.9);
			  transform: perspective(.5em) rotateX(-5deg);
			  z-index: -1; /* z-index 要设为 -1,文本在0层*/
		      background-image: -webkit-linear-gradient(90deg,rgba(190,100,40,0.1),rgba(190,100,40,0.9));
			}
			/*
		      background-image: -webkit-linear-gradient(90deg,rgba(250,250,200,0.1),rgba(250,250,200,0.5),rgba(250,250,200,0.9));
			*/
			.winnerboard_title2{
				position: absolute;				
				--border: solid 1px red;
				color: white;
				display: inline;
				width:99%;
				text-align:center;
				font-size: 18px;
				font-family: "microsoft yahei";
				top: 4px;
			}
			
			#winnerboard1_top1r{
				position: relative;				
				--border: solid 1px blue;
				width:28%;
				height:98%;
				display: table;
				padding-left: 8px;
				padding-top: 4px;
				float:left;
			}
			
			#winnerboard1_pics{
				position: relative;				
				--border: solid 1px blue;
				display: flex;
				width:99%;
				height:85%;
			}
			
			.winner_itm{
				flex: 1;
				width:32px;
				height:32px;
				border: solid 1px red;
				border-radius: 4px;
				color: yellow;
				text-align:center;
				font-size: 18px;
				font-family: "microsoft yahei";
				text-align:center;
				margin: 10px;
			}
		   
		</style>
	</head>
	<body>
		<div id="div_bg1" class="div_bg">
			<div id="div1" class="div1">
				<div id="div12" class="div12">
					<nav>click me</nav>
				</div>
			<!--
			-->
			</div>
			
			<div id="mask1" class="mask">
				<div id="winnerboard1">
					<!-- 本次中奖名单 -->
					<div id="winnerboard1_top">
						<div id="winnerboard1_top1j">
							<span id="winnerboard1_top1j1" class="winnerboard_title1"> 参与人数：</span>
							<span id="winnerboard1_top1j2" class="winnerboard_title1"> 173 </span>
						</div>
						<div id="winnerboard1_top1m">
							<span id="winnerboard1_top1mt" class="winnerboard_title2"> 获奖名单</span>
						</div>
						<div id="winnerboard1_top1r">
							<span id="winnerboard1_top1r1" class="winnerboard_title1"> 本次中奖：</span>
							<span id="winnerboard1_top1r2" class="winnerboard_title1"> 3 </span>
						</div>
					</div>
					<div id="winnerboard1_pics">
						<span class="winner_itm">中奖者1</span>
						<span class="winner_itm">中奖者2</span>
					</div>
				</div>
			</div>
			
		</div>
	</body>
</html>
